<template>
   <div class="table-wapper">
    <el-table highlight-current-row stripe :data="tableData" style="width: 100%" size="mini">
      <el-table-column :label="$t('configLazyLoad.qualityCheck.cycleName')" prop="cycleName">
      </el-table-column>
      <el-table-column :label="$t('configLazyLoad.qualityCheck.startDate')" prop="cycleBegins">
      </el-table-column>
      <el-table-column :label="$t('configLazyLoad.qualityCheck.endDate')" prop="cycleEnds">
      </el-table-column>
      <el-table-column :label="$t('configLazyLoad.qualityCheck.periodInterval')">
        <template scope="scope">
          <span>{{scope.row.cycleInterval ? scope.row.cycleInterval + $t('public.day2') : $t('configLazyLoad.qualityCheck.oneNaturalMonth')}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('public.operate')"
      width="194">
      <template scope="scope">
        <el-button type="text" size="small" @click="showDetail(scope.$index, scope.row)">
          {{$t('configLazyLoad.qualityCheck.qualityCycleDetail')}}</el-button>
        <el-button size="small" type="text" :class="[scope.row.active?'stop':'start']" @click="changeActive(scope.$index, scope.row)">{{scope.row.active?$t('configLazyLoad.qualityCheck.disableCycle'):$t('configLazyLoad.qualityCheck.enableCycle')}}</el-button>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'CysleTable',
    props: {
      initTable: {
        type: Array,
        defaults: function () {
          return []
        }
      }
    },
    computed: {
      tableData () {
        return JSON.parse(JSON.stringify(this.initTable))
      }
    },
    methods: {
      showDetail (index, row) {
        this.$emit('show', row)
      },
      changeActive (inde, row) {
        this.$emit('change', row)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .el-table .cell >.stop
    color $c-pink
</style>
